<template>
  <div ref="containerRef" class="container"></div>
</template>

<script setup lang="ts">
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';
import { DndPanel } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css';

import BaseBehaviorConnection from './base/BaseBehaviorConnection';
import Entry from './action/Entry';
import { ExecuteState } from './base/types';

LogicFlow.use(DndPanel);

defineOptions({
  name: 'BehaviorDesigner',
});

const containerRef = ref<HTMLDivElement>();
onMounted(() => {
  const lf = new LogicFlow({
    container: containerRef.value!,
    grid: true,
    adjustEdgeStartAndEnd: true,
    // background: {
    //   backgroundColor: 'rgb(26,26,26)',
    // },
  });
  lf.register(BaseBehaviorConnection);
  lf.register(Entry);
  lf.setDefaultEdgeType('BaseBehaviorConnection');

  lf.extension.dndPanel.setPatternItems([
    {
      label: '选区',
      icon: '',
      callback: () => {
        lf.extension.selectionSelect.openSelectionSelect();
        lf.once('selection:selected', () => {
          lf.extension.selectionSelect.closeSelectionSelect();
        });
      },
    },
    {
      type: 'circle',
      text: '开始',
      label: '开始节点',
      icon: '',
    },
    {
      type: 'rect',
      label: '用户任务',
      icon: '',
      className: 'important-node',
    },
    {
      type: 'rect',
      label: '系统任务',
      icon: '',
      className: 'import_icon',
    },
    {
      type: 'diamond',
      label: '条件判断',
      icon: '',
    },
    {
      type: 'circle',
      text: '结束',
      label: '结束节点',
      icon: '',
    },
  ]);
  lf.render({
    nodes: [
      {
        id: '1',
        type: 'rect',
        x: 100,
        y: 100,
        text: '节点1',
      },
      {
        id: '2',
        type: 'circle',
        x: 300,
        y: 200,
        text: '节点2',
      },
      {
        id: '3',
        type: 'Entry',
        x: 400,
        y: 200,
        text: '节点3',
      },
    ],
    edges: [
      {
        id: 'e1',
        sourceNodeId: '1',
        targetNodeId: '2',
        type: 'BaseBehaviorConnection',
        text: '连线',
        properties: {
          executeState: 'Running' as ExecuteState,
        },
      },
    ],
  });

  setTimeout(() => {
    const edge = lf.getEdgeModelById('e1');
    edge.setProperties({
      executeState: 'Inactive' as ExecuteState,
    });
  }, 5000);
  (window as any).lf = lf;
});
</script>

<style lang="less" scoped>
.container {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  background-color: rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
</style>
